<template>
    <div class="addGoodsCont" :style="'min-height: '+docheight+'px'">
        <div v-if="!showTimeOut&&showCont">
            <div class="hasData">
                <div class="formCont">
                    <div class="addTip">编辑商品</div>
                    <div class="formItem">
                        <div class="formName">商品封面</div>
                        <cropper-com :propImg="goodsInfo.goods_image"  @successCropper="getCoverImg"></cropper-com>
                    </div>
                    <div class="formItem">
                        <van-field  
                            v-model="goodsInfo.goods_name" 
                            label="商品名称" 
                            placeholder="请输入商品名称" 
                        />
                    </div>
                    <div class="formItem flexCenter">
                        <div>
                            <van-field v-model="goodsInfo.goods_price" placeholder="请输入商品售价" type="number" label="商品售价" />
                        </div>
                        <div>元</div>
                    </div>
                    <div class="formItem">
                        <van-field name="radio" label="商品类型">
                            <template #input>
                                <van-radio-group checked-color="#6d94f8" v-model="goodsInfo.goods_type" direction="horizontal">
                                <van-radio :name="1"><span class="checkText">邮寄配送</span></van-radio>
                                <van-radio :name="2"><span class="checkText">上门服务</span></van-radio>
                                </van-radio-group>
                            </template>
                        </van-field>
                    </div>
                    <div class="formItem" v-if="goodsInfo.goods_type==1">
                        <van-field name="radio" label="商品分类">
                            <template #input>
                                <van-radio-group checked-color="#6d94f8" v-model="goodsInfo.goods_cate" direction="horizontal">
                                    <van-radio class="radioItem" :name="1"><span class="checkText">普通</span></van-radio>
                                    <van-radio class="radioItem" :name="2"><span class="checkText">灯具</span></van-radio>
                                    <van-radio class="radioItem" :name="4"><span class="checkText">浴霸</span></van-radio>
                                </van-radio-group>
                            </template>
                        </van-field>
                    </div>
                    <div class="formItem">
                        <van-field  
                        rows="2"
                            show-word-limit
                            autosize
                            type="textarea"
                            maxlength="100" 
                            v-model="goodsInfo.goods_describe" 
                            label="商品描述" 
                            placeholder="请输入商品描述" 
                        />
                    </div>
                    <div class="formItem">
                        <van-field  
                            v-model="goodsInfo.activity_name" 
                            label="商品标签" 
                            maxlength="4"
                            placeholder="请输入商品标签（选填）" 
                        />
                    </div>
                    <div class="formItem">
                        <van-field  
                            v-model="goodsInfo.sort" 
                            label="商品排序" 
                            maxlength="4"
                            placeholder="数字越大排序越靠前" 
                        />
                    </div>
                    <div class="formItem noflex noBorder">
                        <div class="formName hasMargin">详情图片</div>
                        <def-up-img-more :propImg="goodsDetailImg" @successUpImg="getDetailImg"></def-up-img-more>
                    </div>
                </div>
                <save-btn @saveClick="saveFn" value="保存信息"></save-btn>
                <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
            </div>  
        </div>
        <sub-load v-if="showLoad"></sub-load>
        <getLoad v-if="!showCont"></getLoad>
        <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  <script>
    import {Toast } from 'vux'
    import cropperCom from '@/components/public/cropperCom.vue'
    import cropperMore from '@/components/public/cropperMore.vue'
    import defUpImgMore from '@/components/public/defUpImgMore.vue'
    import saveBtn from '@/components/public/saveBtn.vue'
    import subLoad from '@/components/public/subLoad.vue'
    import getLoad from '@/components/public/getLoad'
    import getTimeOut from '@/components/public/getTimeOut'
    import { saveGoods,showGoods } from '@/http/api';

    export default {
      components: {getTimeOut,getLoad,subLoad,Toast,cropperCom,cropperMore,defUpImgMore,saveBtn},
      data() {
        return {
            showTimeOut: false,
            showCont:false,
            showLoad:false,
            showText:'',
            showToast:false,
            
            goodsInfo:{
                goods_image:'',
                goods_name:'',
                goods_describe:'',
                goods_details_img:'',
                goods_price:'',
                activity_name:'',
                sort:1,
                is_new:1,
                goods_type:1,
                goods_cate:1,
            },
            goodsDetailImg:[],
        }
      },
      props: {},
      methods:{
        saveFn(){
            let data = this.goodsInfo
            if(!this.showLoad){
                this.showLoad = true
                saveGoods(data).then((res)=>{
                    this.showLoad = false
                    this.showToast = true
                    if(res.data.code==1){
                        this.showText = '编辑成功'
                        setTimeout(()=>{
                            this.$router.back()
                        },1500)
                    }else{
                        this.showText = res.data.msg
                    }
                }).catch((err)=>{
                    this.showLoad = false
                    this.showToast = true
                    this.showText = '网络超时'
                })
            }
        },
        getDetailImg(arr){
            let newArr = []
            for(let i = 0; i < arr.length; i++){
                newArr.push(arr[i].img)
            }
            this.goodsInfo.goods_details_img = newArr.join(',')
        },
        getCoverImg(src){
            this.goodsInfo.goods_image = src
        },
        getData(){
          let data = {
            goods_id:this.$route.query.id
          }
          showGoods(data).then((res)=>{
            this.showCont= true
            if(res.data.code==1){
              if(res.data.data.goods_details_img!=''){
                let arr = res.data.data.goods_details_img.split(',')
                for(let i = 0; i < arr.length; i++){
                    this.goodsDetailImg.push({img: arr[i]})
                }
              }
              this.goodsInfo = res.data.data
            }else{
              this.showToast = true
              this.showText = res.data.msg
            }
          }).catch(()=>{
            this.showTimeOut = true
            this.showCont= true
          })
        },
      },
      mounted(){
      },
      created() {
        this.getData()
      },
    }
  </script>
  
  <style scoped lang="less">
  .addGoodsCont{
    width: 100%;
    background-color: #edf2ff;
    padding-bottom: 2rem;
    box-sizing: border-box;
    padding-top: 0.75rem;
    
    .formCont{
        width: 92%;
        margin: 0 auto;
        padding: 1rem 4%;
        // margin-top: 1rem;
        border-radius: 0.25rem;
        background-color: #fff;
        box-sizing: border-box;
        .addTip{
            font-weight: bold;
            margin-bottom: 0.75rem;
        }
        .formItem{
            padding: 0.25rem 0;
            width: 100%;
            display: flex;
            position: relative;
            border-bottom: 1px solid rgb(245,245,245);
            .formName{
                width: 4rem;
                font-size: 0.7rem;
                color: #646566;
                margin-right: 0.75rem;
                box-sizing: border-box;
            }
            .tagCont{
                width: 2.5rem;
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                .tagItem{
                    width: 30%;
                    padding: 0.35rem 0;
                    text-align: center;
                    background-color: #ccc;
                    color: white;
                    box-sizing: border-box;
                    margin-bottom: 0.75rem;
                    font-size: 0.6rem;
                }
                .tagActive{
                    color: white;
                    background-color: #6d94f8;
                }
            }
            .checkText{
                font-size: 0.7rem;
                color: #646566;
            }
        }
        .flexCenter{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .formTitle{
            font-size: 0.75rem;
            font-weight: bold;
        }
        .xsPriceTip{
            font-size: 0.6rem;
            margin-top: 0.25rem;
            color: #999;
        }
        .setPriceItem{
            width: 100%;
            border-bottom: 1px solid rgb(245,245,245);
            padding:0.25rem 0 1rem;
            box-sizing: border-box;
            margin-top: 1rem;
            .flexCenter{
                align-items: center;
                display: flex;
                .flexInput{
                    flex: 1;
                    width: 2rem;
                }
            }
            .delSetPrice{
                display: flex;
                justify-content: flex-end;
                margin-top: 0.5rem;
                .delBtn{
                    padding: 0.35rem 1.25rem;
                    color: #6d94f8;
                    font-size: 0.6rem;
                    border: 1px solid #6d94f8;
                    text-align: center;
                    border-radius: 2rem;
                }
            }
        }
        .hasMargin{
            margin-top: 1rem;
        }
        .noBorder{
            border-bottom: none;
        }
        .noflex{
            display: block;
        }
    }
  }
  </style>
<style>
.van-picker__confirm{
  color: #6d94f8;
}
.van-cell::after{
    border-bottom: none;
}
.van-field__label{
    width:4rem;
}
.formCont .van-cell{
    padding: 0.5rem 0;
}
</style>
  